<script setup>
import { ref } from 'vue'
const props = defineProps({
    imgSrc: String,
    title: String,
    num: Number,
    left: Number,
    top: Number,
    right: Number,
    scaleX: {
        type: Number,
        default: 1
    }
})

const scaleX = props.scaleX
// console.log(scaleX)

</script>
<template>
    <div class="centerItem"
        :style="`position:absolute;left:${left}%;top:${top}%;right:${right}%;transform: scaleX(${scaleX});`">
        <div class="img">
            <img :src="imgSrc" alt="">
        </div>
        <div :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }" class="content">
            <div class="title">{{ title }}</div>
            <div class="num">{{ num }}</div>
        </div>
    </div>
</template>
<style scoped>
.centerItem {
    width: 45.2px;
    height: 12.8px;
    background-image: url(/homePageImg/d1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    /* transform: scaleX(-1); */
}

.content {
    display: flex;
    align-items: center;
}

.centerItem .img {
    width: 12px;
    height: 10px;
    margin: 0 2px;
    padding: 2px;
    padding-top: 1px;
}

.centerItem .img img {
    width: 100%;
    height: 100%;
}

.centerItem .title {
    font-size: 3px;
}

.centerItem .num {
    font-size: 5px;
    margin-left: 1px;
}
</style>
